<template>
  <div class="user" v-if="userList">
    <div
      class="box"
      :style="{
        backgroundImage: `url('${userList? userList.app_background !='' ? userList.app_background+'?x-oss-process=image/resize,m_mfit,h_405,w_720':'./assets/001.jpg':''}')`,
      }"
    >
      <div class="back" @click="$router.back()">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div class="username">
        <img :src="userList ? userList.avatar : ''" alt="" />
        <h5>{{ userList ? userList.username : "" }}</h5>
        <div class="position">
          <span>{{ userList ? userList.occupation : "" }}</span>
          <span>.</span>
          <span>{{ userList.location ? userList.location.province.name : ""  }}</span>
        </div>
        <p class="introduce">
          {{ userList ? userList.verify_description : "" }}
        </p>
      </div>

      <div class="fans">
        <div class="creator-fan">
          <div class="flower">
            <div class="flower-fans">
              <span
                >{{
                  userList ? getPlay(userList.count.count_popularity) : ""
                }}w</span
              >
              <span
                >{{
                  userList ? getPlay(userList.count.count_follower) : ""
                }}w</span
              >
              <span>{{
                userList ? getPlay(userList.count.count_followee) : ""
              }}</span>
            </div>
            <div class="fans-writer">
              <span>人气</span>
              <span>粉丝</span>
              <span>关注</span>
            </div>
          </div>
          <div class="relation">
            <span>联系合作</span>
            <span>关注</span>
          </div>
        </div>
      </div>
    </div>

    <van-tabs v-model="active" swipeable >
      <van-tab>
        <template #title> 作品 </template>
        <van-dropdown-menu active-color="#1989fa">
          <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
        <ul class="product">
          <UserProduction
            v-for="(product, index) in production"
            :key="index"
            :product="product"
          ></UserProduction>
        </ul>
      </van-tab>
      <van-tab>
        <template #title> 专辑 </template>
        内容 2
      </van-tab>
      <van-tab>
        <template #title> 喜欢</template>
        <UserLike v-for="(child,index) in userLiked" :key="index" :child="child"></UserLike>
      </van-tab>
      <van-tab>
        <template #title> 资料 </template>
        内容 4
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import { DropdownMenu, DropdownItem } from "vant";
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Tab);
Vue.use(Tabs);
import UserProduction from "@/components/UserProduction.vue";
import UserLike from "@/components/UserLike.vue";
export default {
  components: {
    UserProduction,
    UserLike,
  },
  data() {
    return {
      userList: null,
      production: null,
      isFixed:true,
      userLiked:null,
      active: 0,
      value2: "a",
      option2: [
        { text: "默认排序", value: "a" },
        { text: "热门排序", value: "b" },
        { text: "最新上传", value: "c" },
      ],
    };
  },
  methods: {
    getPlay: function (value) {
      if (value > 10000) {
        return (value / 10000).toFixed(1);
      } else {
        return value;
      }
    },
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/xpc/user/" + this.$route.query.id)
      .then((res) => {
        this.userList = res.data.data;
      });

    this.axios
      .get(
        "https://apis.netstart.cn/xpc/user/" +
          this.$route.query.id +
          "/articles"
      )
      .then((res) => {
        this.production = res.data.data.list;

      
      });
    
      this.axios
      .get(
        "https://apis.netstart.cn/xpc/user/"+this.$route.query.id +"/articles-approved"
         
      )
      .then((res) => {
          this.userLiked=res.data.data.list
       console.log(this.userLiked);

      
      });
  },
};
</script>

<style lang="less" scoped>
.user {
  .box {
    padding: 10px;
    height: 50vh;
    background-position: center center;
    background-size: cover;
    color: white;
    position: relative;
    .back {
      i {
        font-size: 24px;
      }
    }
    .username {
      img {
        width: 50px;
        border-radius: 50%;
      }
      h5 {
        font-size: 18px;
        font-weight: 200;
        margin: 10px 0;
      }
      .position {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #dddd;
        font-size: 14px;
        span {
          margin-right: 4px;
        }
      }
      .introduce {
        color: #dddd;
        font-size: 14px;
      }
    }
    .fans {
      position: absolute;
      bottom: 34px;
      .creator-fan {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        .flower {
          display: flex;
          width: 100%;
          flex-wrap: wrap;

          .flower-fans {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span {
              width: 30%;
              margin-right: 10px;
            }
          }
          .fans-writer {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span {
              width: 30%;
              margin-right: 10px;
              color: #dddd;
              font-size: 14px;
            }
          }
        }
        .relation {
          width: 100%;
          display: flex;
          justify-content: space-between;
          span {
            width: 45%;
            &:nth-child(1) {
              background: white;
              color: black;
              text-align: center;
              font-size: 14px;
              padding: 4px 0;
              border-radius: 12px;
            }
            &:nth-child(2) {
              background: red;
              color: white;
              text-align: center;
              font-size: 14px;
              padding: 4px 0;
              border-radius: 12px;
            }
          }
        }
      }
    }
  }



.van-dropdown-menu__item{
    display: flex;
    flex: 0.3;
}
  .product{
      overflow-y: auto;
      padding-bottom: 20px;
  }
}
</style>